<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            margin: 30px auto;
        }
        table th,table td{
            width: 100px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
        }
        span:hover{
            cursor: pointer;
        }
    </style>
    <script src="./jquery-3.5.0/jquery-3.5.0.min.js"></script>
    <script>
        $(function(){
            //1.获取token
            var baseUrl='http://182.92.83.218:7788';
            function getToken(){
                //获取用户名和密码
                var obj={
                    "password": "123321",
                    "username": "admin1"
                }
                //发送登录请求，获取token
                
                $.ajax({
                    url:baseUrl+'/user/login',
                    type:'POST',
                    contentType: "application/json; charset=utf-8",
                    data:JSON.stringify(obj),
                    success:function(data){
                        console.log(data.data.token);
                        sessionStorage.setItem("token",data.data.token)
                    }

                });
            }
            var token=sessionStorage.getItem("token")
            //2.获取users
            function getUsers(){
                    $.ajax({
                    url:baseUrl+'/baseUser/findAll',
                    type:'GET',
                    headers:{
                        "Authorization":token
                    },
                    success:function(data){
                        console.log(data);
                        var users=data.data;
                        users.forEach(function(item,index){
                        var tr=$(`<tr>
                        <td>`+item.id+`</td>
                        <td>`+item.username+`</td>
                        <td>`+item.realname+`</td>
                        <td>`+item.politicsStatus+`</td>
                        <td>`+item.gender+`</td>
                        <td>`+item.status+`</td>
                        <td>`+item.telephone+`</td>
                        <td>
                                <span>删除</span>
                        </td>
                        </tr`);
                        $("tbody").append(tr);
                        });
                    }
                })
            }
            // getUsers()
            //3.delete
            function getDelete(){
                    $('tbody').on('click','span',function(){
                    //1.获取id
                    var id=$(this).parents('tr').children().eq(0).text();
                    console.log(id);
                    //2.发送删除请求
                    $.ajax({
                        url:baseUrl+'/baseUser/deleteById?id='+id,
                        type:'GET',
                        headers:{
                            "Authorization":token
                        },
                        success:function(data){
                            console.log(data);
                            if(data.status==200){
                                //清空tbody中的tr
                                $('tbody').empty();
                                //3.刷新页面
                                getUsers()
                            }
                        }
                    })
                })
            }
            function* g(){
                //1.请求token
                getToken();
                yield 1;
                //2.请求users
                getUsers();
                yield 2;
                //3.请求delete
                getDelete();
                return 3
            }
            var g1=g();
            for(var item of g1){
                console.log(item);
            }
        })
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>角色</th>
                <th>性别</th>
                <th>状态</th>
                <th>手机号</th>
                <th>操作</th>    
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    
</body>
</html>